<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down"/></span>
            <span v-else>收起<a-icon type="up"/></span>
          </a-button>
        </div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item">
            <a-form-model-item label="姓名/代号">
              <a-input v-model="form.personNameCode" placeholder="请输入" @blur="onQuery" />
            </a-form-model-item>
            <a-form-model-item label="归属地">
<!--              <j-search-select-tag-->
<!--                :fieldNames="{label: 'cityName', value: 'areaCode',options: 'dictOptions'}"-->
<!--                placeholder="请选择"-->
<!--                v-model="form.ascriptionPlace"-->
<!--                :dictOptions="FollowPlace"-->
<!--                @change="onQuery"-->
<!--              />-->
              <a-select @change="onQuery" v-model="form.ascriptionPlace">
                <a-select-option v-for="item of FollowPlace" :value="item.areaCode">
                  {{ item.cityName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="标签">
              <j-search-select-tag
                placeholder="请选择"
                v-model="form.label"
                :dictOptions="incidentCodeOptions1"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="手机号码">
              <a-input v-model="form.personPhone" placeholder="请输入" @blur="onQuery" />
            </a-form-model-item>
            <a-form-model-item label="出入岛类型">
<!--              <a-input v-model="form.leaveIntoIslandType" placeholder="请输入" @blur="onQuery" />-->
              <j-search-select-tag
                placeholder="请选择"
                v-model="form.leaveIntoIslandType"
                :dictOptions="incidentCodeOptions2"

              />
            </a-form-model-item>
            <a-form-model-item label="出入岛方式">
              <j-search-select-tag
                placeholder="请选择"
                v-model="form.leaveIntoIslandWay"
                :dictOptions="incidentCodeOptions3"

              />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="出入岛时间" class="zdy-form-item-label">
              <a-radio-group buttonStyle="solid" v-model="form.timeType" @change="onQuery">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <a-range-picker
                v-if="form.timeType === '0'"
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                @change="rangePickerChange"
                style="margin-left: 10px"
              />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div style="margin-bottom: 20px">
        <a-button type="primary" :disabled="isDisabled" @click="onAdd()">发起案事件</a-button>
        <a-button style="margin-left: 20px" @click="followExcelXlsFun">导出</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          bordered
          :hideColSettings="['action']"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <template slot="ascriptionPlace" slot-scope="text">
            <span> {{ ascriptionPlaceFun(text) }} </span>
          </template>
          <template slot="leaveIntoIslandType" slot-scope="text, record">
            <span v-if="text === 1">出岛</span>
            <span v-if="text === 2">入岛</span>

          </template>
          <template slot="leaveIntoIslandWay" slot-scope="text, record">
            <span v-if="text === 1">飞机</span>
            <span v-if="text === 2">火车</span>
            <span v-if="text === 3">轮船</span>
            <span v-if="text === 4">公汽</span>
            <span v-if="text === 5">自驾车</span>

          </template>

          <template slot="label" slot-scope="text, record">
            <span v-if="text === 1">特别关注</span>
            <span v-if="text === 2">异常入琼</span>
            <span v-if="text === 3">信息异常</span>
            <span v-if="text === 4">首次入琼</span>

          </template>
          <template slot="intelligenceStatus" slot-scope="text, record">
            <span v-if="text === 1" style="color: red">未研判</span>
            <span v-if="text === 2">已研判</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onYP(record)" type="link" style="padding: 0;">查看</a-button>
            <a-button @click="onYP(record)" type="link" style="padding: 0;">编辑</a-button>
          </template>
        </custom-table>
      </div>
      <AddCaseModal
        ref="addCaseModalId"
        title="新增案事件"
        :pageType="2"
        moduleType="intelligence"
        :targetData="selectRowsK"
        @close="addCaseClose"
        @createSuccess="createSuccess"
      />
      <YpModal ref="ypModalId" />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as api from '@/api/wxSmuggle/intelligence.js'
import * as caseApi from '@/api/wxSmuggle/caseEvent.js'
import { querySimpleByPhoneList } from '@/utils/util'
import CustomTable from '@/components/zxd/Table/CustomTable'
import AddCaseModal from '@/views/wxSmuggle/modules/AddCaseModal'
import YpModal from './components/YpModal'
import formList from "@views/wxSmuggle/modules/FormItem";
import {followExcelXls} from "@/api/wxSmuggle/intelligence.js";
export default {
  components: {
    CustomTable,
    AddCaseModal,
    YpModal,
    formList
  },
  computed:{

  },
  data() {
    return {
      form:{},
      show: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      reloading: false,
      formData: {},
      isDisabled: true,
      FollowPlace:[],
      incidentCodeOptions1:[
        { value: '1', text: '特别关注' },
        { value: '2', text: '异常入琼' },
        { value: '3', text: '信息异常' },
        { value: '4', text: '首次入琼' }
      ],
      incidentCodeOptions2:[
        { value: '1', text: '出岛' },
        { value: '2', text: '入岛' }
      ],
      incidentCodeOptions3:[
        { value: '1', text: '飞机' },
        { value: '2', text: '火车' },
        { value: '3', text: '轮船' },
        { value: '4', text: '公汽' },
        { value: '5', text: '自驾车' },
      ],
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名/代号',
          dataIndex: 'personNameCode',
          align: 'center',
          scopedSlots: { customRender: 'personNameCode' }
        },
        {
          title: '手机号',
          dataIndex: 'personPhone',
          align: 'center',
          scopedSlots: { customRender: 'personPhone' }
        },
        {
          title: '归属地',
          dataIndex: 'ascriptionPlace',
          align: 'center',
          scopedSlots: { customRender: 'ascriptionPlace' }
        },
        {
          title: '身份证号',
          dataIndex: 'identityNumber',
          align: 'center',
          scopedSlots: { customRender: 'identityNumber ' }
        },
        {
          title: '年龄',
          dataIndex: 'personAge',
          align: 'center',
          scopedSlots: { customRender: 'personAge' }
        },
        {
          title: '出入岛类型',
          dataIndex: 'leaveIntoIslandType',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoIslandType' }
        },
        {
          title: '出入岛方式',
          dataIndex: 'leaveIntoIslandWay',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoIslandWay' }
        },
        {
          title: '出入岛时间',
          dataIndex: 'leaveIntoTime',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoTime' }
        },
        {
          title: '标签',
          dataIndex: 'label',
          width: 140,
          align: 'center',
          scopedSlots: { customRender: 'label' }
        },
        {
          title: '团伙名称',
          dataIndex: 'teamName',
          width: 140,
          align: 'center'
        },
        {
          title: '情报类型',
          dataIndex: 'intelligenceStatus',
          width: 140,
          align: 'center',
          scopedSlots: { customRender: 'intelligenceStatus' }
        },
        {
          title: '发现位置',
          dataIndex: 'discoveryLocation',
          width: 140,
          align: 'center'
        },
        {
          title: '情报推送时间',
          dataIndex: 'intelligencePushTime',
          width: 140,
          align: 'center'
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [],
      selectRows: [],
      selectRowsK: [],
      modelList: [],
      infoObject: this.$route.query.infoObject
    }
  },
  created() {
    //从模型带过来的信息,填上并搜索
    if (this.infoObject != undefined) {
      this.formData = Object.assign({}, this.infoObject)
    }
    this.getModalList()
    this.refreshTable()
  },
  methods: {
    followExcelXlsFun(){
      console.log(this.selectRows)
      followExcelXls({id:this.selectRows}).then(ser => {

      })
    },
    ascriptionPlaceFun (val){
      let a = ''
      for (let item of this.FollowPlace){
        if(val === item.areaCode){
          a = item.areaCode
        }
      }
      if(a === ''){
        return '--'
      } else {
        return a
      }

    },
    moment,
    changeSearchForm(prop, date) {
      if (prop === 'time') {
        this.$set(this.form, 'assessTimeStart', date[0])
        this.$set(this.form, 'assessTimeEnd', date[1])
      }
    },
    onSelectedRow(rows,key) {
      console.log('rows')
      console.log(rows,key)
      this.selectRows = key
      this.selectRowsK = rows
      this.isDisabled = rows.length > 0 ? false : true
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
      console.log(this.form)
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.rangePickerTime = []
      this.$nextTick(() => {
        // 重置行政区划
        // this.$refs.linkage.reload()
        this.reload()
      })
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let formData = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      api
        .intelligenceList(formData)
        .then(res => {
          if (res.records) {
            this.pageData = res.records
            this.loading = false
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            // querySimpleByPhoneList(this, 2, this.pageData.records)
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onAdd() {
      // console.log(this.selectRows)
      this.$refs.addCaseModalId.show()
    },
    createSuccess() {
      this.$refs.table.onClearRowKeys()
      this.onQuery()
    },
    addCaseClose() {
      this.$refs.table.onClearRowKeys()
    },
    // 详情
    onYP(record) {
      // this.$refs.ypModalId.show(record)
      this.$router.push({
        path:'/mingwenXQ',
        query:{
          records:record.id
        }
      })
    },
    // 预警时间
    rangePickerChange(date) {
      this.$set(this.form, 'leaveStartime', date[0])
      this.$set(this.form, 'leaveEndTime', date[1])
    },
    getModalList() {
      api.getFollowPlace()
        .then(res => {
          // if (res.success) {
          //   this.modelList = res.result
          // }
          // console.log(res)
          this.FollowPlace = res
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    }
  }
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #71b604;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
}
</style>
